<template>
    <div v-for="item in userDetailsList"
        style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%; padding-bottom: 3%;">
        <nut-row style="margin-bottom: 5%">
            <nut-col :span="8">
                <div class="avatar">
                    <div class="status"><span></span>在线</div>
                    <image class="avatarImage2" src="https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg">
                    </image>
                </div>
            </nut-col>
            <nut-col :span="16">
                <nut-row>
                    <nut-col :span="18">
                        <div style="display: flex; margin-right: 5%;align-items: center;margin-top: 5%;">
                            <text style="font-size: 20px;font-weight: bold;margin-right: 5%;">{{ item.user_Nickname
                                }}</text>
                            <div class="flex-a level">

                            </div>
                        </div>
                    </nut-col>
                    <nut-col :span="6">
                        <div style="display: flex; margin-right: 5%;align-items: center;margin-top: 25%;">
                            <image style="width: 18px;height: 18px;margin-left: 5%;"
                                src="https://cxj.szzkba.cn/upload/i/2024/06/05/135951.png">
                            </image>
                            <text style="font-size: 14px;margin-left: 5%;color:#999999;">31m</text>
                        </div>
                    </nut-col>
                </nut-row>
                <nut-row>
                    <div style="display: flex; margin-right: 5%;align-items: center;">
                        <nut-tag color="#E9E9E9" text-color="#33CCFF" style="margin-right: 5%;" plain> {{
        item.sex == "男" ? "♂" : "♀" }} {{ item.user_Age }} </nut-tag>
                        <nut-tag color="#E9E9E9" text-color="#33CCFF" style="margin-right: 5%;" plain> {{
        item.user_Weight }}kg </nut-tag>
                        <nut-tag color="#E9E9E9" text-color="#33CCFF" style="margin-right: 5%;" plain> {{ item.user_Tall
                            }}cm </nut-tag>
                    </div>
                </nut-row>
                <nut-row>
                    <div style="display: flex; margin-right: 5%;align-items: center;margin-top: 4%;">
                        <nut-tag v-if="item.user_Enterts[0] != ''" color="#E9E9E9" text-color="#999999"
                            style="margin-right: 5%;"> {{ item.user_Enterts[0] }} </nut-tag>
                        <nut-tag v-if="item.user_Services[0] != ''" color="#E9E9E9" text-color="#999999"
                            style="margin-right: 5%;"> {{ item.user_Services[0] }} </nut-tag>
                        <nut-tag v-if="item.user_Leisures[0] != ''" color="#E9E9E9" text-color="#999999"
                            style="margin-right: 5%;"> {{ item.user_Leisures[0] }} </nut-tag>
                        <!-- <nut-tag v-if="item.user_Balls[0] != ''" color="#E9E9E9" text-color="#999999"
                            style="margin-right: 5%;"> {{ item.user_Balls[0] }} </nut-tag> -->
                    </div>
                </nut-row>
                <nut-row>
                    <div style="display: flex; margin:20rpx 5% 0 0;align-items: center;">
                        <div style="font-size: 14px;color:#999999;">获得0个好评</div>
                        <div style="margin-left: auto;margin-top: -2%;"><nut-button color="#21C38F" size="mini"
                                @click="jumpTo('/packageA/pages/detail/index?id=' + item.ID)">选择Ta</nut-button>
                        </div>
                    </div>
                </nut-row>
            </nut-col>
        </nut-row>
    </div>
</template>
<script lang="ts">
import { reactive, toRefs, onMounted } from 'vue'
import Taro, { useRouter } from '@tarojs/taro'
import mitt from "../../../utils/mitt";
import { getUserDetailsList, getSearchUser } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        const state = reactive({
            userDetailsList: [],
            id: '',
        });
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const getUserAllList = () => {
            getUserDetailsList().then(res => {
                if (res.code == 0) {
                    for (var i in res.data.list) {
                        res.data.list[i].user_Enterts = res.data.list[i].user_Enterts.split(",")
                        res.data.list[i].user_Services = res.data.list[i].user_Services.split(",")
                        res.data.list[i].user_Leisures = res.data.list[i].user_Leisures.split(",")
                        res.data.list[i].user_Balls = res.data.list[i].user_Balls.split(",")
                    }
                    state.userDetailsList = res.data.list
                }
            })
        };
        onMounted(() => {
            mitt.on("hasLogin", (val) => {
            })
            const router = useRouter();
            if (router.params.id) {
                state.id = router.params.id
                serarch(router.params.id)
            } else {
                getUserAllList()
            }
        });
        const serarch = (id) => {
            getSearchUser({ ID: id }).then(res => {
                if (res.code == 0) {
                    state.userDetailsList = res.data.userDetails
                }
            })
        }
        return {
            ...toRefs(state), jumpTo, getUserAllList, serarch
        };
    }
};
</script>
<style lang="scss">
.avatar {
    position: relative;
    width: 100%;
    height: 180px;
}

.avatarImage1 {
    .nut-badge {
        white-space: nowrap;
        position: absolute;
        left: 60rpx;
        top: 60rpx;
    }
}

.status {
    width: 100rpx;
    text-align: center;
    background: rgba($color: #000000, $alpha: 0.4);
    color: #4CE9C3;
    border-radius: 20px 0 20px 0;
    position: absolute;
    left: 20rpx;
    top: 35rpx;
    white-space: nowrap;
    font-size: 22rpx;
    z-index: 999;
}

.status span {
    display: inline-block;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background: #4CE9C3;
    margin-right: 10rpx;
}

.avatarImage2 {
    position: absolute;
    border-radius: 20px;
    top: 35px;
    left: 20px;
    z-index: 1;
    width: 200px;
    height: 200px;
}

.level {
    span {
        font-size: 20rpx;
        margin-left: 5rpx;
        text-align: center;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
        padding-left: 10rpx !important;
        background: #6574AB;
        color: #EBF7FF;
        padding: 0 10rpx;
        border-radius: 4rpx;

    }

    .c1 {
        background: #6574AB;
    }

    .c2 {
        background: #007DC4;
    }

    .c3 {
        background: #7B1DD3;
    }

    .c4 {
        background: #EB5B00;
    }

    .c5 {
        background: #FD5131;
    }

    .c6 {
        background: #F61C36;
    }

    img {
        width: 45rpx;
        height: 45rpx;
    }

    .info {
        display: inline-block;
        width: 92%;
        border-radius: 10rpx;
        background: #F5F5F5;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        text-align: center;
    }


}
</style>